<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />

    <title>添加房东 - 房东管理 - H-ui.admin v3.1</title>
</head>
<body>
<article class="page-container">
    {{-- 表单验证提示 --}}

    <form  class="form form-horizontal" action="{{ route('admin.fangowner.store') }}"  id="form-admin-add">
        @include('admin.common.validate')
        {{ csrf_field() }}

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="name"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" value="先生" checked>
                    <label for="sex-1">先生</label>
                </div>
                <div class="radio-box">
                    <input type="radio" value="女士" name="sex">
                    <label for="sex-2">女士</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="age"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="phone"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="email"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="address">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="card"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
            <div class="formControls col-xs-2 col-sm-2">
                <div id="picker">身份证照片</div>
                <span>正面、反面、手持</span>
            </div>
            <div class="formControls col-xs-6 col-sm-7">
                <!-- 表单提交时，上传图片地址，以#隔开 -->
                <input type="hidden" name="pic" id="pic"/>
                <!-- 显示上传成功后的图片容器 -->
                <div id="imglist"></div>
            </div>
        </div>



        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;添加属性&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">


        $("#form-admin-add").validate({
            rules:{
                name:{
                    required:true,
                    maxlength:30
                },
                card:{
                    required:true,
                    minlength:18,
                    maxlength:19
                },
                email:{
                    email:true
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler: function (form) {
                // 表单提交地址
                let url = $(form).attr('action');
                // 表单序列化   _token=aaa&name=fewflew
                let data = $(form).serialize();

                // jquery post提交
                $.post(url,data).then(({status,msg})=>{
                    if(status == 0){
                        layer.msg(msg,{icon:1,time:2000},()=>{
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.$('.btn-refresh').click();
                            parent.layer.close(index);
                        })
                    }else{
                        layer.msg(msg,{icon:2,time:2000})
                    }
                })
            }
        });


        //文件上传
        var uploader = WebUploader.create({
            //自动上传
            auto:true,
            //swf路径
            swf:'/webuploader/uploader.swf',
            server:'{{ route('admin.fangowner.upfile') }}',
            formData:{
                _token:'{{ csrf_token() }}'
            },
            //文件表单名称
            fileVal:'file',
            pick:{
                id:'#picker',
                //是否上传多个
                multiple:true
            },
            //压缩
            resize:true
        });


        //上传成功回调
        uploader.on('uploadSuccess', function (file, ret) {
            // 解决表单提交时，图片以#隔开解决
            let val = $('#pic').val();
            let tmp = val + '#' + ret.url;
            $('#pic').val(tmp);
            // 图片显示
            let imglist = $('#imglist');
            // 注：一定要用追加还是不html覆盖
            let html = `
            <div style="position: relative;;width:100px;">
                <img src="${ret.url}" style="width:100px;" />
                <strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color:white;font-size: 20px;">X<strong>
            </div>
        `;
            imglist.append(html);
        });



        //删除图片
        function delpic(obj,picurl){
            let url = "{{ route('admin.fangowner.delfile') }}?file="+picurl;
            //发起请求删除
            fetch(url);
            //删除当前点击图片显示
            $(obj).parent().remove();
            //修改隐藏域表单
            $('#pic').val($('#pic').val().replace(`#${picurl}`,''));
        }


        // 单选框样式
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


    ;

    // var index = parent.layer.getFrameIndex(window.name);
    // parent.$('.btn-refresh').click();
    // // parent.layer.close(index);
</script>
</body>
</html>